<template>
	<view class="">
		<!-- uniapp地图组件 -->
		<map @markertap='markertap' style="width: 100vw; height: 100vh;" :latitude="map.latitude"
			:longitude="map.longitude" :markers="covers">
		</map>
		<!-- 模态框 -->
		<u-modal v-model="show" :title='username'>
			<view class="slot-content width-100 u-text-center">
				<image v-if="content" :src="content" style="width: 300rpx;height: 300rpx;" mode="aspectFit"></image>
			</view>
		</u-modal>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: '',
				username: '',
				map: {//进入页面的位置
					//id: 0, // 使用 marker点击事件 需要填写id
					latitude: 39.909,
					longitude: 116.39742,
				},
				covers: []//获取每个用户的位置
			}
		},
		methods: {
			markertap(e) {
				this.show = true
				this.$api.getPublicMsg({
					uid: e.markerId - 900000000
				}).then(
					res => {
						console.log(res)
						this.username = res.username
						this.content = res.avatar

					}
				)


			}
		},
		computed: {
			userMsg() {//监听登录用户信息
				return JSON.parse(uni.getStorageSync('myMsg'))
			}
		},
		created() {
			this.$api.getmap().then(
				res => {
					//判断地理位置是否合理后，渲染全部合理用户位置信息，当前用户为第一个
					res.list.forEach((item, index) => {
						if (index == this.userMsg.uid && Math.abs(+item.latitude) <= 90 && Math.abs(+item
								.longitude) <= 180) {
							let arr = {
								markerId: +this.userMsg.uid,
								longitude: +item.longitude,
								latitude: +item.latitude,
								title: item.username,
								iconPath: item.avatar,
								callout: item.phone,
								width: 30,
								height: 45,
							}
							this.map.longitude = +item.longitude
							this.map.latitude = +item.latitude
							this.covers.push(arr)
						}
					})
					res.list.forEach((item, index) => {
						if (index !== this.userMsg.uid && Math.abs(+item.latitude) <= 90 && Math.abs(+item
								.longitude) <= 180) {
							let arr = {
								markerId: +this.userMsg.uid,
								longitude: +item.longitude,
								latitude: +item.latitude,
								title: item.username,
								iconPath: item.avatar,
								callout: item.phone,
								width: 30,
								height: 45,
							}
							this.covers.push(arr)
						}
					})

				}
			)
		}
	}
</script>

<style lang="stylus">

</style>
